<template>
	<view class="container">
<!-- 		<view class="logo-content">
			<text class="title">政企客户现场巡检报告</text>
		</view> -->
		
		<view class="form-content">
			
			<!-- 客户基本信息 -->
			<uni-section title="基本信息" type="line">
				<uni-card title="基础信息">
					
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<input v-model="checkForm.customerName" class="input" type="text" 
						:placeholder="baseInfo.customerNameText" maxlength="30" />
					</view>
					
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<input v-model="checkForm.address" class="input" type="text" 
						:placeholder="baseInfo.address" maxlength="30" />
					</view>
					
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<input v-model="checkForm.checkTime" class="input" type="text" 
						:placeholder="baseInfo.checkTime" maxlength="30" />
					</view>
					
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<input v-model="checkForm.deptName" class="input" type="text" 
						:placeholder="baseInfo.deptName" maxlength="30" />
					</view>
					
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<input v-model="checkForm.checkMan" class="input" type="text" 
						:placeholder="baseInfo.checkMan" maxlength="30" />
					</view>
					
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<input v-model="checkForm.phone" class="input" type="text" 
						:placeholder="baseInfo.phone" maxlength="30" />
					</view>
					
					<!-- 客户业务 -->
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						
						<input v-model="checkForm.business" class="input" type="text" 
							@click="chooseBusiness" :disabled="true" placeholder="" maxlength="30" />

						<uni-data-picker
							class="mypicker"
							ref="businessPicker"
							:show="showChooseBusiness"
							:localdata="businessColumns" popup-title="请选择客户业务" 
							@change="onchange" @nodeclick="onNodeClick">
						</uni-data-picker>
					</view>
				</uni-card>
			</uni-section>
			
			<!-- 机房环境检查 -->
			<uni-section title="机房环境检查" type="line">
				<uni-card title="机房环境">
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">机房温度20度，湿度40%</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.server_temp_humi" :localdata="state"></uni-data-checkbox>
					</view>
				</uni-card>
				<uni-card title="机柜检查">
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">机柜防尘防鼠、接地情况</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.rack_rat_ground" :localdata="state"></uni-data-checkbox>
					</view>
					
					<view class="input-item checkbox-card1 xrequired flex align-center">
						<view class="text">设备固定，且安装空间需保证各维护模块(单板、风扇、电源模块等)可正常运行及维护</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.rack_device" :localdata="state"></uni-data-checkbox>
					</view>
				</uni-card>
			</uni-section>
			
			<!-- 设备运行状况检查 -->
			<uni-section title="设备运行状况检查" type="line">
				<uni-card title="设备运行状况">
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">指示灯状态</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.light" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">有无异常告警</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.warn" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">电源运行情况</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.power" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">设备散热(防尘网、风扇是否积灰)</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.device_heat" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">接地保护</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.groud_protect" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">标签标识是否清晰、准确</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.label_clear" :localdata="state"></uni-data-checkbox>
					</view>
				</uni-card>
			</uni-section>
			
			<!-- 设备的连接情况检查 -->
			<uni-section title="设备的连接情况检查" type="line">
				<uni-card title="设备的连接情况">
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">ODF/DDF焊接是否牢固</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.odf_ddf" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">走线是否规范整洁、标签是否消晰</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.line" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">各类连接头是否牢固</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.connect" :localdata="state"></uni-data-checkbox>
					</view>
					<view class="input-item checkbox-card xrequired flex align-center">
						<view class="text">配线架跳线位置是否与标识相符</view>
						<uni-data-checkbox class="choose-btn" v-model="checkForm.mdf" :localdata="state"></uni-data-checkbox>
					</view>
				</uni-card>
			</uni-section>
			
			<!-- 巡检总结：操作记录 -->
			<uni-section title="巡检总结" type="line">
				<uni-card title="巡检总结:操作记录(如设备清扫、线缆整理、标张贴等)、检查情况说明及建议">
					<uni-easyinput type="textarea" autoHeight v-model="checkForm.summary" placeholder="请输入内容"></uni-easyinput>
				</uni-card>
			</uni-section>
			
			<!-- 与用户访谈记录 -->
			<uni-section title="与用户访谈记录" type="line">
				<uni-card title="访谈记录">
					<uni-easyinput type="textarea" autoHeight v-model="checkForm.comment" placeholder="请输入内容"></uni-easyinput>
				</uni-card>
			</uni-section>
			
			<!-- 用户满意度 -->
			<uni-section title="用户满意度" type="line">
				<uni-card title="用户意见">
					<!-- 用户对现场巡检人员工作是否满意 -->
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<uni-data-picker
							class="mypicker"
							ref="businessPicker"
							:show="showChooseBusiness"
							:localdata="satisfyColumns" popup-title="请选择用户满意度" 
							@change="onchange" @nodeclick="onNodeClick">
						</uni-data-picker>
					</view>
					
					<view class="input-item xrequired flex align-center">
						<view class="iconfont icon icon-jihua"></view>
						<input v-model="checkForm.customerPhone" class="input" type="text" 
						:placeholder="baseInfo.customerPhone" maxlength="30" />
					</view>
				</uni-card>
			</uni-section>
			
			<!-- 现场巡检照片 -->
			<uni-section title="现场巡检照片" type="line">
				<uni-card title="请选择照片" 
					class="image-content">
					
					<uni-file-picker 
						v-model="imageValue"  
						file-mediatype="image"
						mode="grid"
						file-extname="png,jpg"
						:limit="1"
						@progress="progress" 
						@success="success" 
						@fail="fail" 
						@select="select"
					/>
					
					<view class="image-text">
						<p>请按照以下格式上传打卡附件</p>
						<p>·记录现场打卡信息</p>
						<p>·记录经纬度信息</p>
					</view>
				</uni-card>
			</uni-section>
		
			<view class="action-container">
				<view class="action-card">
					<u-button
						class="mybutton"
						custom-style="height: 60px;"
						color="linear-gradient(to right, #55aaff, #6394ff)"  
						icon-color="#55aaff" text="保存" 
						@click="progressSearch">
					</u-button>
					
					<u-button
						class="mybutton"
						custom-style="height: 60px;"
						color="linear-gradient(to right, #f9d39d, #f9ae3d)"  
						icon-color="#FFF" text="提交" 
						@click="progressSearch">
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { getMethod, postMethod } from '@/api/check'
	
	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				// 注册form
				checkForm: {
				  customerName: "",
				  address: "",
				  checkTime: "",
				  deptName: "",
				  checkMan: "",
				  phone: "",
				  business: "",
				  customerPhone: "",
				},
				baseInfo: {
					customerNameText: "请输入客户名称",
					address: "巡检地点",
					checkTime: "巡检时间",
					deptName: "巡检部门",
					checkMan: "巡检人员",
					phone: "联系电话",
					business: "客户业务",
					customerPhone: "客户联系方式",
				},
				// 所属社区
				showChooseBusiness: false,
				businessColumns: [
					{
						text: "语音",
						value: "0"
					},
					{
						text: "组网专线",
						value: "1"
					},
					{
						text: "互联网",
						value: "2"
					},
					{
						text: "其他",
						value: "3"
					},
				],
				satisfyColumns: [
					{
						text: "非常满意",
						value: "0"
					},
					{
						text: "满意",
						value: "1"
					},
					{
						text: "不满意",
						value: "2"
					}
				],
				server_temp_humi: 0,
				rack_rat_ground: 0,
				rack_device: 0,
				summary: '',
				state: [{
					text: '正常',
					value: 0
				}, {
					text: '异常',
					value: 1
				}],
				imageValue:[],
			}
		},
		methods: {
			
			// 确认选择所属社区
			chooseBusiness() {
				this.showChooseBusiness = true;
				this.$refs.businessPicker.show();
				console.log(this.showChooseBusiness);
			},
			
			cancelBusiness() {
				this.showChooseBusiness = false;
			},
			
			confirmBusiness(e) {
				console.log(e);
			},
			
			changeBusiness(e) {
				console.log(e);
			},
			
			
			// 获取上传状态
			select(e){
				console.log('选择文件：',e)
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			
			async handleSubmit() {
				// 检查表单是否填写完整
				
				this.$modal.loading("提交中，请耐心等待...");
				this.postMethod();
			},
			
			// 提交巡检报告
			async postMethod() {
				postMethod(this.checkForm).then(res => {
					this.$modal.closeLoading()
					uni.showModal({
						title: "系统提示",
						content: "提交完成!",
						success: function (res) {
							console.log(res)
							// if (res.confirm) {
							// 	// 回到首页
							// 	uni.redirectTo({ url: `/pages/index` });
							// }
						}
					})
				}).catch(() => {
					if (this.captchaEnabled) {
						this.getCode()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		// height: calc(100% - 100px);
		// background-color: red;
		padding-bottom: 40px;
		
		.logo-content {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			height: 24px;
			
			.title {
				line-height: 24px;
			}
		}
		
		.form-content {
			width: 100%;
			
			.input-item {
				margin: 14px auto;
				background-color: #f5f6f7;
				height: 45px;
				width: 100%;
				border-radius: 20px;
			
				.icon {
				  font-size: 38rpx;
				  margin-left: 10px;
				  color: #999;
				}
			
				.input {
				  width: 100%;
				  font-size: 14px;
				  line-height: 20px;
				  text-align: left;
				  padding-left: 15px;
				}
				
				.text {
					font-size: 14px;
				}
				
				.mypicker {
					position: absolute;
					left: 0;
					right: 0;
					margin-left: auto;
					margin-right: auto;
					width: calc(100% - 110px); /* 必须指定宽度 */
					// background-color: red;
					// visibility: hidden;
				}
			}
			
			.checkbox-card {
				width: 100%;
				height: 60px;
				// background-color: green;
				display: flex;
				flex-direction: column;
				padding-top: 8px;
				
				.text {
					padding-left: 12px;
					padding-right: 12px;
					width: 100%;
					// background-color: red;
					display: flex;
					justify-content: left;
					font-size: 16px;
				}
				
				.choose-btn {
					width: 100%;
					// background-color: black;
					display: flex;
					justify-content: right;
				}
			}
			
			.checkbox-card1 {
				width: 100%;
				height: 100px;
				// background-color: green;
				display: flex;
				flex-direction: column;
				padding-top: 8px;
				
				.text {
					padding-left: 12px;
					padding-right: 12px;
					width: 100%;
					// background-color: red;
					display: flex;
					justify-content: left;
					font-size: 16px;
				}
				
				.choose-btn {
					width: 100%;
					// background-color: black;
					display: flex;
					justify-content: right;
				}
			}
			
			.action-card {
				// background-color: red;
				padding-left: 8px;
				padding-right: 8px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				
				.mybutton {
					width: calc(50% - 16px);
				}
			}
			
			.image-content {
				
				.image-text {
					position: absolute;
					right: 24px;
					top: 60px;
				}
			}
		}
	}
</style>